<script>
//定义名称，方便用于<keep-alive>
export default { name: 'NavidromeView' }
</script>

<script setup>
import { inject, onMounted, ref, toRaw } from 'vue';
import { storeToRefs } from 'pinia';
import { useAppCommonStore } from '../store/appCommonStore';
import { useSettingStore } from '../store/settingStore';
import Back2TopBtn from '../components/Back2TopBtn.vue';
import { useCloudStorageStore } from '../store/cloudStorageStore';
import { Navidrome } from '../../vendor/navidrome';
import EmptyControl from '../components/EmptyControl.vue';



const { visitNavidromeSessionCreate, visitNavidromeSessionEdit, visitNavidromeSessionDetail } = inject('appRoute')
const { showConfirm } = inject('apiExpose')

const { showToast, showFailToast, hideAllCtxMenus, } = useAppCommonStore()
const { isCloudStorageViewTipsShow } = storeToRefs(useSettingStore())
const { navidromeSessions } = storeToRefs(useCloudStorageStore())
const { removeNavidromeSession, removeAllNavidromeSession, } = useCloudStorageStore()



const navidromeRef = ref(null)
const back2TopBtnRef = ref(null)


const resetBack2TopBtn = () => {
    if (back2TopBtnRef.value) back2TopBtnRef.value.setScrollTarget(navidromeRef.value)
}

const onScroll = () => {
    hideAllCtxMenus()
}

const onDrop = async (event) => {
    event.preventDefault()
    
}

const removeItem = async (item) => {
    const ok = await showConfirm('确定删除会话记录吗')
    if(!ok) return

    removeNavidromeSession(item)
}

const removeAll = async () => {
    if(navidromeSessions.value.length < 1) return
    const ok = await showConfirm('确定清空全部会话记录吗')
    if(!ok) return

    showToast('会话记录已全部清空')
    removeAllNavidromeSession()
}

const tutorialList = [{
    title: '专辑Tab：最大分页固定为300'
}, {
    title: '歌曲Tab：曲库中随机显示36首'
}, {
    title: '暂不支持：最近播放、收藏、关注等功能'
}, {
    title: '播放记录：目前尚未找到官方相关API，故无法同步至Navidrome'
}]

/* 生命周期、监听 */
onMounted(() => {
    resetBack2TopBtn()
})
</script>

<template>
    <div id="navidrome-view" ref="navidromeRef" @scroll="onScroll" >
        <div class="header">
            <div class="title">
                <span>Navidrome</span>
            </div>
            <div class="about" v-show="isCloudStorageViewTipsShow">
                <p>提示：实验性功能；当前使用Subsonic API版本为v{{ Navidrome.VERSION }}</p>
                <p>目前仅提供播放相关功能；若需进行数据管理，请使用Navidrome官方客户端</p>
            </div>
            <div class="action" :class="{ 'none-about': !isCloudStorageViewTipsShow }">
                <SvgTextButton text="新建会话" :leftAction="visitNavidromeSessionCreate">
                    <template #left-img>
                        <!--
                        <svg width="14" height="14"
                            viewBox="0 0 682.65 682.74" xmlns="http://www.w3.org/2000/svg">
                            <g id="Layer_2" data-name="Layer 2">
                                <g id="Layer_1-2" data-name="Layer 1">
                                    <path
                                        d="M298.59,384.15h-7.06q-123.24,0-246.49,0c-21.63,0-38.69-12.57-43.64-31.94-7-27.56,13.21-53.29,42.33-53.51,25.33-.18,50.66,0,76,0H298.59v-6.44q0-123.49,0-247c0-20.39,10.77-36.44,28.49-42.71C355-7.34,383.55,13,384,43.16c.26,16.33,0,32.67,0,49V298.65h6.82q123.49,0,247,0c21.52,0,38.61,12.77,43.43,32.19,6.75,27.26-13.06,52.7-41.62,53.25-11.16.22-22.33,0-33.49,0H384.09v6.69q0,123.5,0,247c0,21.59-12.66,38.65-32.06,43.53-27.59,6.95-53.24-13.31-53.39-42.46-.17-32.66,0-65.33,0-98V384.15Z" />
                                </g>
                            </g>
                        </svg>
                        -->
                        <svg width="18" height="18" viewBox="0 -50 768.02 554.57" xmlns="http://www.w3.org/2000/svg">
                            <g id="Layer_2" data-name="Layer 2">
                                <g id="Layer_1-2" data-name="Layer 1">
                                    <path
                                        d="M341.9,0q148,0,296,0C659,0,675,11.28,680.8,30.05c8.34,26.78-11.43,54.43-39.45,55.18-1.17,0-2.33,0-3.5,0q-296.46,0-592.93,0C22.37,85.25,5.32,71.87.87,50.78-4.36,26,14.59,1.39,39.94.12c2.49-.13,5-.11,7.5-.11Z" />
                                    <path
                                        d="M554.64,426.5h-6.72c-26.49,0-53,.17-79.47-.1a41.87,41.87,0,0,1-39.06-27.7,42.4,42.4,0,0,1,11.2-46.19,41.85,41.85,0,0,1,29.11-11.25q39.49,0,79,0h6V335c0-26-.12-52,0-78,.15-25.3,19.44-44.3,44.06-43.72,23.23.55,41.24,19.54,41.37,43.92.13,25.82,0,51.65,0,77.48v6.57h5.67c26.65,0,53.31-.11,80,.05,20.38.12,37.94,14.9,41.51,34.49,3.74,20.57-7.15,40.65-26.59,47.73a53.72,53.72,0,0,1-17.56,2.85c-25.66.3-51.32.13-77,.13h-6v6.36c0,26,.1,52,0,78-.11,20.74-13.1,37.68-32.17,42.41-27.42,6.8-53-13.28-53.24-42.11-.22-26-.05-52-.05-78Z" />
                                    <path
                                        d="M234.37,256q-94.73,0-189.44,0c-21.55,0-38.62-12.68-43.5-32.09-6.74-26.8,12.45-52.1,40.47-53.35,1.33-.06,2.67-.05,4-.05H423.78c21.17,0,37.53,11.12,43.49,29.46,9.15,28.13-11.52,55.87-42,56-36.32.15-72.64,0-109,0Z" />
                                    <path
                                        d="M170.91,426.5c-42.48,0-85,.07-127.45,0-20.94-.06-37.61-13.2-42.21-32.85-6.18-26.41,13.5-52,40.6-52.3,23.82-.27,47.65-.07,71.47-.07q92.46,0,184.93,0c24.55,0,43.52,19.37,43.12,43.58-.38,23.41-19.15,41.53-43.51,41.61-40,.12-80,0-120,0Z" />
                                </g>
                            </g>
                        </svg>
                    </template>
                </SvgTextButton>
                <SvgTextButton text="清空记录" :leftAction="removeAll" class="spacing">
                    <template #left-img>
                        <svg width="17" height="17" viewBox="0 0 256 256"
                            data-name="Layer 1" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1040,669H882c-12.79-4.93-17.16-14.62-17.1-27.83.26-52.77.11-105.55.11-158.32V477c-6,0-11.42-.32-16.84.09-6.54.48-11.66-1.39-15.17-7.08v-7c3.16-5.7,8-7.48,14.44-7.36,18.29.32,36.58.12,54.88.1,1.75,0,3.5-.16,5.48-.25,0-7.76,0-14.91,0-22.05a18.56,18.56,0,0,1,6.6-14.52c2.85-2.39,6.37-4,9.59-5.92h73c13.83,5.64,17.27,10.84,17.25,26.08,0,5.41,0,10.82,0,16.68h7.53c17.61,0,35.21.2,52.81-.12,6.43-.12,11.27,1.63,14.41,7.36v7c-3.5,5.7-8.63,7.56-15.17,7.08-5.41-.4-10.89-.09-16.84-.09v6.36c0,52.6-.15,105.2.11,157.8C1057.17,654.36,1052.81,664.08,1040,669ZM886.24,477.29V640.4c0,8.44-.49,7.34,7.11,7.35q67.95,0,135.9,0c6.51,0,6.52,0,6.52-6.43v-164Zm106.5-42.78H929.37v21h63.37Z"
                                transform="translate(-833 -413)" />
                            <path
                                d="M950.29,562.2c0-13.47,0-26.94,0-40.41,0-7.94,4.25-12.84,10.82-12.77,6.36.07,10.59,5,10.6,12.52,0,27.28,0,54.55,0,81.83,0,5.13-1.71,9.17-6.5,11.36-7.39,3.36-14.87-2.16-14.94-11.11-.11-13.81,0-27.61,0-41.42Z"
                                transform="translate(-833 -413)" />
                            <path
                                d="M1014.25,562.63c0,13.48,0,27,0,40.42,0,7.88-4.3,12.82-10.87,12.64-6.29-.18-10.35-5.13-10.36-12.75q0-41.16,0-82.33c0-5.91,3-9.91,8-11.26a10.29,10.29,0,0,1,11.85,5.16,16.06,16.06,0,0,1,1.33,6.71c.12,13.8.06,27.61.06,41.41Z"
                                transform="translate(-833 -413)" />
                            <path
                                d="M929,562.53q0,21,0,41.92c0,4.8-2.09,8.39-6.49,10.29-4.21,1.81-8.49,1.25-11.43-2.23a13.57,13.57,0,0,1-3.17-8c-.23-28.1-.19-56.21-.12-84.32,0-6.74,4.63-11.34,10.74-11.19s10.41,4.78,10.44,11.59C929.05,534.59,929,548.56,929,562.53Z"
                                transform="translate(-833 -413)" />
                        </svg>
                    </template>
                </SvgTextButton>
            </div>
        </div>
        <div class="center">
            <div class="list-title">
                <div class="size-text content-text-highlight">会话记录({{ navidromeSessions.length }})</div>
            </div>
            <div v-for="(item, index) in navidromeSessions" 
                v-show="navidromeSessions.length > 0"
                class="session-item"
                @click="visitNavidromeSessionDetail(item.id)">
                <div class="icon-wrap">
                    <svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 522"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M243,0h36c8.35,1.15,16.73,2.08,25,3.5Q389.74,18.1,450,80.87,504.33,137.79,518,215.52c1.6,9.11,2.67,18.32,4,27.48v36c-.77,5.88-1.47,11.78-2.32,17.65-8.7,60.25-34.84,111.64-78.91,153.64Q384,504.41,306.49,518c-9.12,1.6-18.33,2.67-27.49,4H243c-5.88-.77-11.77-1.47-17.65-2.32C165.1,511,113.71,484.84,71.71,440.77Q17.59,384,4,306.48c-1.6-9.11-2.67-18.32-4-27.48V243c.32-1.41.74-2.81.94-4.24,1.22-8.9,2-17.88,3.66-26.68Q20.34,129.61,81.23,71.7,138.05,17.63,215.52,4C224.63,2.39,233.84,1.32,243,0Zm18.06,491c124.56.33,227.18-100.37,230-224.69C493.91,138,391.22,33.65,266.19,31,137.87,28.19,33.59,131,31,255.94,28.21,385.93,133.93,491.5,261.06,491Z"/><path d="M157.83,261A103.17,103.17,0,1,1,260.65,364.17,103,103,0,0,1,157.83,261Zm31-.39c0,40.09,32,72.49,71.66,72.53,40.15,0,72.61-31.91,72.66-71.54.06-40.2-31.85-72.73-71.41-72.78C221.27,188.78,188.87,220.68,188.84,260.63Z"/><path d="M269.16,469.83c-1.74,0-4.57.06-7.39,0-9.39-.21-16.19-6.69-16.25-15.4s6.59-14.73,16-15.69c14.85-1.51,30.15-2,44.34-6C374.78,412.84,418,367.67,435,297.84c2.38-9.8,10-15.51,18.78-13.5,9,2.07,13.63,10.11,11.5,20-18.65,86.41-87.5,150.7-175.1,163.4C283.56,468.7,276.9,469.08,269.16,469.83Z"/><path d="M251.46,52.18c3.33,0,6.67-.17,10,0,8.72.53,15.11,7.24,15,15.58a15.09,15.09,0,0,1-15.25,15.27c-16.07.24-32,1.81-47.32,6.56C146.25,110.57,103.61,155.28,87,224.36c-2.28,9.49-9.85,15.17-18.46,13.36-9.08-1.92-14.2-10.11-11.81-19.78Q88.89,87.8,219.3,56.52c10.46-2.5,21.37-3.13,32.08-4.63Z"/><path d="M99.16,256.52c3.07-76.64,53.86-130.31,110.2-148.93a163.43,163.43,0,0,1,51.48-8.35,15.32,15.32,0,0,1,15.63,15.45c0,8.66-6.54,15.09-15.62,15.48-4.32.18-8.64.38-13,.74-57.46,4.79-107.51,51.82-115.92,109a174.69,174.69,0,0,0-1.75,19.36c-.36,10.29-6.3,17.12-15.47,17.19s-15.59-7.12-15.6-17.56Z"/><path d="M422.84,265.49c-3.1,76.64-53.82,130.27-110.21,148.92a165.11,165.11,0,0,1-51,8.37c-9.31.06-16.15-6.8-16.11-15.49s6.68-15.16,16.14-15.47q6.22-.21,12.44-.73c57-4.72,107.32-51.63,115.8-108a182.29,182.29,0,0,0,1.85-20.35c.39-10.27,6.32-17.11,15.49-17.17s15.58,7.13,15.59,17.57Z"/><path d="M83.17,258.58c0,8.86-3.15,14.19-9.81,16.79a15.36,15.36,0,0,1-16.92-3.79c-5.15-5.46-5.93-17.16-1.6-23.79a15.35,15.35,0,0,1,18.41-5.88C80,244.43,83.2,249.86,83.17,258.58Z"/><path d="M438.83,263.39c0-8.81,3.17-14.18,9.84-16.78a15.38,15.38,0,0,1,16.91,3.83c5.13,5.47,5.91,17.17,1.57,23.79a15.44,15.44,0,0,1-18.43,5.85C442,277.56,438.81,272.15,438.83,263.39Z"/><path class="cls-1" d="M188.84,260.63c0-39.95,32.43-71.85,72.91-71.79,39.56,0,71.47,32.58,71.41,72.78-.05,39.63-32.51,71.59-72.66,71.54C220.82,333.12,188.8,300.72,188.84,260.63Zm106.33.72a33.83,33.83,0,0,0-33.82-34.52c-19.23-.11-34.4,14.76-34.52,33.81-.11,19.24,14.74,34.4,33.81,34.53A33.83,33.83,0,0,0,295.17,261.35Z"/><path d="M295.17,261.35a33.83,33.83,0,0,1-34.53,33.82c-19.07-.13-33.92-15.29-33.81-34.53.12-19,15.29-33.92,34.52-33.81A33.83,33.83,0,0,1,295.17,261.35Zm-33.81,4.15c1.29-2.23,2.76-3.63,2.55-4.71s-2-2-3.16-2.9c-.95,1.12-2.62,2.21-2.66,3.36S259.72,263.49,261.36,265.5Z"/></g></g></svg>
                </div>
                <div class="title-wrap">
                    <span v-html="item.title"></span>
                </div>
                <div class="action" @click.stop="">
                    <div class="btn edit-btn" @click="visitNavidromeSessionEdit(item.id)">
                        <svg width="18" height="18" viewBox="0 0 992.3 992.23" xmlns="http://www.w3.org/2000/svg">
                            <g id="Layer_2" data-name="Layer 2">
                                <g id="Layer_1-2" data-name="Layer 1">
                                    <path
                                        d="M428.27,992.13c-88.16,0-176.32.28-264.48-.1-56.56-.24-101.65-23.86-134.6-69.78A150.76,150.76,0,0,1,.34,833.37C0,743.21.19,653.05.18,562.89c0-88-.5-176,.17-264C.82,236.36,29,188.83,82.63,156.81c25.32-15.11,53.25-21.18,82.69-21.15q161,.15,322,.06c26.66,0,45.78,15.33,50.38,40,5,26.58-15,53-41.88,55.53-3.31.31-6.66.42-10,.42q-159.75,0-319.49-.06c-25.45,0-45.64,9.41-59.78,30.75-7.47,11.29-10.42,23.92-10.41,37.45q.09,229.23,0,458.47,0,35.25,0,70.5c.06,38.34,29,67.32,67.42,67.33q264.74,0,529.47,0c38.53,0,67.21-28.52,67.44-67.25.21-32.66.05-65.33.05-98q0-112.74,0-225.49c0-19.14,7-34.41,23.5-44.58,30.3-18.63,70.25,2.33,72.32,37.83.13,2.17.21,4.33.21,6.5q0,161.24,0,322.48c0,47.47-16.82,87.91-51.29,120.5-30,28.4-66.18,43.56-107.53,43.81-89.83.52-179.66.16-269.49.16Z" />
                                    <path
                                        d="M417,473.1c1.08-20.29,2.1-40.59,3.27-60.88a46.93,46.93,0,0,1,11.63-28.62c1.74-2,3.64-3.89,5.53-5.78L798.28,16.91c22.51-22.5,50.7-22.57,73.22-.07q52.15,52.11,104.27,104.27c22,22,22.06,50.57.07,72.54Q794.42,374.91,613,556.14c-10.34,10.34-22.49,15.36-37,16.06q-50.93,2.47-101.8,5.69c-14.62.91-28.69.35-40.88-9.11-12.48-9.69-19.48-22.41-19.12-38.27.43-19.15,1.73-38.28,2.65-57.41Zm95.78,6.38c13.28-.76,25.7-1.6,38.15-2.09a12.52,12.52,0,0,0,9.12-4q156.09-156.07,312.3-312c1.26-1.26,2.43-2.58,3.23-3.43l-41.31-41.26-72.48,72.49Q640.15,310.8,518.56,432.44c-1.44,1.45-3.22,3.37-3.35,5.18C514.19,451.23,513.55,464.86,512.74,479.48Z" />
                                </g>
                            </g>
                        </svg>
                    </div>
                    <div class="btn delete-btn spacing" @click="removeItem(item)">
                        <svg width="18" height="18" viewBox="0 0 256 256" data-name="Layer 1"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1040,669H882c-12.79-4.93-17.16-14.62-17.1-27.83.26-52.77.11-105.55.11-158.32V477c-6,0-11.42-.32-16.84.09-6.54.48-11.66-1.39-15.17-7.08v-7c3.16-5.7,8-7.48,14.44-7.36,18.29.32,36.58.12,54.88.1,1.75,0,3.5-.16,5.48-.25,0-7.76,0-14.91,0-22.05a18.56,18.56,0,0,1,6.6-14.52c2.85-2.39,6.37-4,9.59-5.92h73c13.83,5.64,17.27,10.84,17.25,26.08,0,5.41,0,10.82,0,16.68h7.53c17.61,0,35.21.2,52.81-.12,6.43-.12,11.27,1.63,14.41,7.36v7c-3.5,5.7-8.63,7.56-15.17,7.08-5.41-.4-10.89-.09-16.84-.09v6.36c0,52.6-.15,105.2.11,157.8C1057.17,654.36,1052.81,664.08,1040,669ZM886.24,477.29V640.4c0,8.44-.49,7.34,7.11,7.35q67.95,0,135.9,0c6.51,0,6.52,0,6.52-6.43v-164Zm106.5-42.78H929.37v21h63.37Z"
                                transform="translate(-833 -413)" />
                            <path
                                d="M950.29,562.2c0-13.47,0-26.94,0-40.41,0-7.94,4.25-12.84,10.82-12.77,6.36.07,10.59,5,10.6,12.52,0,27.28,0,54.55,0,81.83,0,5.13-1.71,9.17-6.5,11.36-7.39,3.36-14.87-2.16-14.94-11.11-.11-13.81,0-27.61,0-41.42Z"
                                transform="translate(-833 -413)" />
                            <path
                                d="M1014.25,562.63c0,13.48,0,27,0,40.42,0,7.88-4.3,12.82-10.87,12.64-6.29-.18-10.35-5.13-10.36-12.75q0-41.16,0-82.33c0-5.91,3-9.91,8-11.26a10.29,10.29,0,0,1,11.85,5.16,16.06,16.06,0,0,1,1.33,6.71c.12,13.8.06,27.61.06,41.41Z"
                                transform="translate(-833 -413)" />
                            <path
                                d="M929,562.53q0,21,0,41.92c0,4.8-2.09,8.39-6.49,10.29-4.21,1.81-8.49,1.25-11.43-2.23a13.57,13.57,0,0,1-3.17-8c-.23-28.1-.19-56.21-.12-84.32,0-6.74,4.63-11.34,10.74-11.19s10.41,4.78,10.44,11.59C929.05,534.59,929,548.56,929,562.53Z"
                                transform="translate(-833 -413)" />
                        </svg>
                    </div>
                </div>
            </div>
            <div v-for="(item, index) in tutorialList" 
                v-show="isCloudStorageViewTipsShow && navidromeSessions.length < 1"
                class="session-item">
                <div class="icon-wrap">
                    <svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 522"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M243,0h36c8.35,1.15,16.73,2.08,25,3.5Q389.74,18.1,450,80.87,504.33,137.79,518,215.52c1.6,9.11,2.67,18.32,4,27.48v36c-.77,5.88-1.47,11.78-2.32,17.65-8.7,60.25-34.84,111.64-78.91,153.64Q384,504.41,306.49,518c-9.12,1.6-18.33,2.67-27.49,4H243c-5.88-.77-11.77-1.47-17.65-2.32C165.1,511,113.71,484.84,71.71,440.77Q17.59,384,4,306.48c-1.6-9.11-2.67-18.32-4-27.48V243c.32-1.41.74-2.81.94-4.24,1.22-8.9,2-17.88,3.66-26.68Q20.34,129.61,81.23,71.7,138.05,17.63,215.52,4C224.63,2.39,233.84,1.32,243,0Zm18.06,491c124.56.33,227.18-100.37,230-224.69C493.91,138,391.22,33.65,266.19,31,137.87,28.19,33.59,131,31,255.94,28.21,385.93,133.93,491.5,261.06,491Z"/><path d="M157.83,261A103.17,103.17,0,1,1,260.65,364.17,103,103,0,0,1,157.83,261Zm31-.39c0,40.09,32,72.49,71.66,72.53,40.15,0,72.61-31.91,72.66-71.54.06-40.2-31.85-72.73-71.41-72.78C221.27,188.78,188.87,220.68,188.84,260.63Z"/><path d="M269.16,469.83c-1.74,0-4.57.06-7.39,0-9.39-.21-16.19-6.69-16.25-15.4s6.59-14.73,16-15.69c14.85-1.51,30.15-2,44.34-6C374.78,412.84,418,367.67,435,297.84c2.38-9.8,10-15.51,18.78-13.5,9,2.07,13.63,10.11,11.5,20-18.65,86.41-87.5,150.7-175.1,163.4C283.56,468.7,276.9,469.08,269.16,469.83Z"/><path d="M251.46,52.18c3.33,0,6.67-.17,10,0,8.72.53,15.11,7.24,15,15.58a15.09,15.09,0,0,1-15.25,15.27c-16.07.24-32,1.81-47.32,6.56C146.25,110.57,103.61,155.28,87,224.36c-2.28,9.49-9.85,15.17-18.46,13.36-9.08-1.92-14.2-10.11-11.81-19.78Q88.89,87.8,219.3,56.52c10.46-2.5,21.37-3.13,32.08-4.63Z"/><path d="M99.16,256.52c3.07-76.64,53.86-130.31,110.2-148.93a163.43,163.43,0,0,1,51.48-8.35,15.32,15.32,0,0,1,15.63,15.45c0,8.66-6.54,15.09-15.62,15.48-4.32.18-8.64.38-13,.74-57.46,4.79-107.51,51.82-115.92,109a174.69,174.69,0,0,0-1.75,19.36c-.36,10.29-6.3,17.12-15.47,17.19s-15.59-7.12-15.6-17.56Z"/><path d="M422.84,265.49c-3.1,76.64-53.82,130.27-110.21,148.92a165.11,165.11,0,0,1-51,8.37c-9.31.06-16.15-6.8-16.11-15.49s6.68-15.16,16.14-15.47q6.22-.21,12.44-.73c57-4.72,107.32-51.63,115.8-108a182.29,182.29,0,0,0,1.85-20.35c.39-10.27,6.32-17.11,15.49-17.17s15.58,7.13,15.59,17.57Z"/><path d="M83.17,258.58c0,8.86-3.15,14.19-9.81,16.79a15.36,15.36,0,0,1-16.92-3.79c-5.15-5.46-5.93-17.16-1.6-23.79a15.35,15.35,0,0,1,18.41-5.88C80,244.43,83.2,249.86,83.17,258.58Z"/><path d="M438.83,263.39c0-8.81,3.17-14.18,9.84-16.78a15.38,15.38,0,0,1,16.91,3.83c5.13,5.47,5.91,17.17,1.57,23.79a15.44,15.44,0,0,1-18.43,5.85C442,277.56,438.81,272.15,438.83,263.39Z"/><path class="cls-1" d="M188.84,260.63c0-39.95,32.43-71.85,72.91-71.79,39.56,0,71.47,32.58,71.41,72.78-.05,39.63-32.51,71.59-72.66,71.54C220.82,333.12,188.8,300.72,188.84,260.63Zm106.33.72a33.83,33.83,0,0,0-33.82-34.52c-19.23-.11-34.4,14.76-34.52,33.81-.11,19.24,14.74,34.4,33.81,34.53A33.83,33.83,0,0,0,295.17,261.35Z"/><path d="M295.17,261.35a33.83,33.83,0,0,1-34.53,33.82c-19.07-.13-33.92-15.29-33.81-34.53.12-19,15.29-33.92,34.52-33.81A33.83,33.83,0,0,1,295.17,261.35Zm-33.81,4.15c1.29-2.23,2.76-3.63,2.55-4.71s-2-2-3.16-2.9c-.95,1.12-2.62,2.21-2.66,3.36S259.72,263.49,261.36,265.5Z"/></g></g></svg>
                </div>
                <div class="title-wrap">
                    <span v-html="item.title"></span>
                </div>
            </div>
            <EmptyControl
                v-show="!isCloudStorageViewTipsShow && navidromeSessions.length < 1">
            </EmptyControl>
        </div>
        <Back2TopBtn ref="back2TopBtnRef"></Back2TopBtn>
    </div>
</template>

<style>
#navidrome-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 33px 10px 33px;
    overflow: scroll;
    overflow-x: hidden;
}

#navidrome-view .cls-1{
    fill: transparent;
}

#navidrome-view .spacing {
    margin-left: 20px;
}

#navidrome-view .header {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

#navidrome-view .header .title {
    text-align: left;
    margin-bottom: 5px;
    font-size: var(--content-text-module-title-size);
    font-weight: bold;
}

#navidrome-view .header .about {
    text-align: left;
    margin-left: 5px;
    margin-bottom: 12px;
    line-height: 29px;
    color: var(--content-subtitle-text-color);
}

#navidrome-view .header .action {
    display: flex;
}

#navidrome-view .header .action.none-about {
    margin-top: 15px;
}

#navidrome-view .center .list-title {
    margin-bottom: 10px;
    text-align: left;
    font-weight: bold;
    display: flex;
    position: relative;
}

#navidrome-view .center .list-title .size-text {
    margin-left: 3px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--content-highlight-color);
    font-size: var(--content-text-tab-title-size);
}

#navidrome-view .center .session-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    margin-top: 3px;
    margin-bottom: 15px;
    border-radius: var(--border-inputs-border-radius);
    border-radius: var(--border-list-item-vertical-border-radius);
    box-shadow: 0px 0px 3px var(--border-popovers-border-color);
    --item-height: 68px;
}

#navidrome-view .center .session-item:hover {
    background: var(--content-list-item-hover-bg-color);
    cursor: pointer;
}

#navidrome-view .center .session-item > div {
    height: var(--item-height);
    vertical-align: middle;
    /*font-size: var(--content-text-size);*/
}

#navidrome-view .center .session-item .icon-wrap {
    width: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#navidrome-view .center .session-item .icon-wrap svg {
    fill: var(--button-icon-btn-color) !important;
    fill: var(--content-subtitle-text-color) !important;
    border-radius: var(--border-img-small-border-radius);
}

#navidrome-view .center .session-item .title-wrap {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: left;
    word-wrap: break-word;
    line-break: anywhere;
}

#navidrome-view .center .session-item .title-wrap span {
    word-wrap: break-word;
    line-break: anywhere;
    line-height: var(--item-height);
}

#navidrome-view .center .session-item .action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 20px 0px 33px;
    cursor: default;
    visibility: hidden;
}

#navidrome-view .center .session-item:hover .action {
    visibility: visible;
}
</style>